<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TabView - Unicorn Tests</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<link type="text/css" rel="stylesheet" href="../assets/demo/demo.css" />
<link type="text/css" rel="stylesheet" href="../yui/logger/assets/logger.css" />     
<link type="text/css" rel="stylesheet" href="../assets/testlogger.css" />

<script type="text/javascript" src="../yui-base.source.js"></script>
<script type="text/javascript" src="../yui/logger/logger.js"></script>
<script type="text/javascript" src="../yui/yuitest/yuitest.js"></script>

<script type="text/javascript" src="../build/core/Unicorn.source.js"></script>
<script type="text/javascript" src="../build/core/lang.source.js"></script>

<script type="text/javascript" src="../build/util/util.source.js"></script>
<script type="text/javascript" src="../build/util/Dom.source.js"></script>
<script type="text/javascript" src="../build/util/Event.source.js"></script>
<script type="text/javascript" src="../build/util/Effect.source.js"></script>

<script type="text/javascript" src="../build/widget/WidgetHelper.source.js"></script>
<script type="text/javascript" src="../build/widget/tabview/TabView.source.js"></script>
</head>

<body>
<!-- demo1 -->
<style type="text/css">
/* tabview */
	.tv-container { position: relative; margin: 20px 0 0 0; width: 600px; }

	.tv-nav { position: absolute; z-index: 50; left: 20px }
		.tv-nav li {
			float: left;
			margin-right: 3px; padding-top: 8px;
			width: 130px; height: 27px;
			line-height: 21px; text-align: center;
			background:url('../assets/demo/tabview_bg.gif') no-repeat 0 6px;
			cursor: pointer
			}
		.tv-nav .current { background-position: 0 -40px; cursor: default!important }
		.tv-nav .current { font-size: 14px; color: #333; font-weight: bold }
		.tv-nav .current a:hover,
		.tv-nav .current a:active { text-decoration: none; cursor: default }
		.tv-nav a { color: #111 !important }
	
	.tv-wrapper {
		clear: both;
		position: relative;
		top: 29px;
		border: 1px solid #AEC7E5;
		/*border-width: 1px 0 0;*/
		height: auto;
		overflow: auto;
		padding: 20px;
		}
 /* end of tabview */
</style>
<div class="tv-container" id="demo1">
	<ul class="tv-nav">
		<li class="current">标题 A</li>
		<li>标题B</li>
		<li>标题C</li>
		<li>标题D</li>
	</ul>
	<div class="tv-wrapper">
		<div>内容区域 A</div>
		<div style="display: none">内容区域 B</div>
		<div style="display: none">内容区域 C</div>
		<div style="display: none">内容区域 D</div>
	</div>
</div>
<!-- end of demo1 -->

<hr style="margin-top: 60px; visibility: hidden" />

<!-- recommend-buy-demo -->
<style type="text/css">
	.recommend-buy-nav { height:20px; overflow:hidden; width:260px }
	.recommend-buy-nav li { float:left; margin:0 -1px 0 0; width:85px }
	.recommend-buy-nav li.current { position:relative; width:88px }
	.recommend-buy-nav li.current a { background-position:-315px -78px }
	.recommend-buy-nav li a {
		background-position:-315px -98px;
		float:left;
		height:20px;
		line-height:20px;
		outline-color:-moz-use-text-color;
		outline-style:none;
		outline-width:medium;
		overflow:hidden;
		}
	.recommend-buy-nav li a, .recommend-buy-nav li a span, .recommend-buy-list li {
		background-image:url(http://assets.taobaocdn.com/img/chl/fp/fp-bg-v32.png);
		background-repeat:no-repeat;
		}
	.recommend-buy-nav li.current a span {
		background-position:100% -78px;
		font-weight:700;
		width:78px;
		}
	.recommend-buy-nav li a span {
		background-position:100% -98px;
		cursor:pointer;
		display:block;
		margin:0 0 0 5px;
		padding:0 5px 0 0;
		text-align:center;
		width:75px;
		}
	.recommend-buy-main {
		border-color: #D8D7D6;
		border-style: none solid solid;
		border-width: medium 1px 1px;
		height:94px;
		overflow:hidden;
		width:254px;
		}
	.recommend-buy-list {
		height:100px;
		overflow:hidden;
		padding:3px 0 0;
		width:256px;
		}
	.recommend-buy-list li {
		background-position:100% -255px;
		float:left;
		height:88px;
		width:64px;
		}
	.recommend-buy-list li span {
		cursor:pointer;
		display:block;
		height:30px;
		margin:auto;
		overflow:hidden;
		text-align:center;
		width:55px;
		}
</style>

<div id="recommend-buy-demo">
	<ul class="recommend-buy-nav">
		<li class="current"><a href="#"><span>热卖商品</span></a></li>
		<li><a href="#"><span>今日特价</span></a></li>
		<li><a href="#"><span>购物无忧</span></a></li>
	</ul>
	<div class="recommend-buy-main">
		<ul class="recommend-buy-list">
			<li><a target="_blank" href="http://ju.atpanel.com/?url=http://search1.taobao.com/browse/0/n-4----0-false-------------------g,ojsxgzlsozsv64dsnfrwkwzvfqzdaxi---g,ktipi---------------y-40-grid-coefp-0-all-0.htm?ad_id=&amp;am_id=&amp;cm_id=&amp;pm_id=1500103836f25791a0e2"><img height="55" width="55" src="http://pics.taobaocdn.com/bao/album/promotion/Txu55X55.JPG"/><span>20元T恤大热卖</span></a></li><li><a target="_blank" href="http://ju.atpanel.com/?url=http://list.taobao.com/browse/16-1623/n-4----0-false--------yes-----------g,ojsxgzlsozsv64dsnfrwkwzqfqztaxi----------2-------b-y-40-grid-coefp-0-all-1623.htm?ad_id=&amp;am_id=&amp;cm_id=&amp;pm_id=1500103837e4c4d14ca5"><img height="55" width="55" src="http://pics.taobaocdn.com/bao/album/promotion/qunzi55X55.JPG"/><span>疯狂特<br/>价女裙</span></a></li><li><a target="_blank" href="http://ju.atpanel.com/?url=http://list.taobao.com/browse/1512/n-4----0-false-----95---yes-----------g,ojsxgzlsozsv64dsnfrwkwztgaycynzqgboq----------2-------b-y-40-grid-coefp-0-all-1512.htm?ad_id=&amp;am_id=&amp;cm_id=&amp;pm_id=1500103838eb96451964"><img height="55" width="55" src="http://pics.taobaocdn.com/bao/album/promotion/shouji55X55.jpg"/><span>特惠手机大放送</span></a></li><li><a target="_blank" href="http://ju.atpanel.com/?url=http://search1.taobao.com/browse/50006842/n-4----0-false-------------------g,ojsxgzlsozsv64dsnfrwkwzqfq2daxi---g,ywxlb7a---------------y-40-grid-coefp-0-all-50006842.htm?ad_id=&amp;am_id=&amp;cm_id=&amp;pm_id=1500103839939516dcfe"><img height="55" width="55" src="http://pics.taobaocdn.com/bao/album/promotion/baobao55X55.jpg"/><span>最流行时尚女包</span></a></li>
		</ul>
		<ul class="recommend-buy-list">
			<li><a target="_blank" href="http://ju.atpanel.com/?url=http://list.taobao.com/browse/50005700/n-0----------------g,gizdgnbrhi2dmnjqgi5temrtgm4tumrqhaytm--g,gizdgnbrhlkk3v5qf7a2vmndhmzdemzthe5eo5lfonzq---------------------40-grid-commend-0-all-50005700.htm?ad_id=&amp;am_id=&amp;cm_id=&amp;pm_id=15001038480e1890fef0"><img height="55" width="55" src="http://pics.taobaocdn.com/bao/album/chl/lady/20080825tianheguess55_55.jpg"/><span>Guess表<br/>低价代购</span></a></li><li><a target="_blank" href="http://ju.atpanel.com/?url=http://search1.taobao.com/browse/33/n-0-false--------yes-----------g,ojsxgzlsozsv64dsnfrwkwzzfqytambqgaydambqlu---g,ywxmrsy------2-2-------b-y-40--coefp-0-all-33.htm?ad_id=&amp;am_id=&amp;cm_id=&amp;pm_id=1500103849198c01de90"><img height="55" width="55" src="http://pics.taobaocdn.com/bao/album/chl/culture/qx08082605.jpg"/><span>女人变有<br/>钱真简单</span></a></li><li><a target="_blank" href="http://ju.atpanel.com/?url=http://search1.taobao.com/browse/3009/n-g,gi4tcnzwhi4tanjvgu--g,gi4tcnzwhlin3t6qy2snbla-----g,ijauytczf6yntqh3----------------40--commend-0-all-3009.htm?ad_id=&amp;am_id=&amp;cm_id=&amp;pm_id=15001038507339c4af88"><img height="55" width="55" src="http://pics.taobaocdn.com/bao/album/chl/zimu-000771.jpg"/><span>Bally百利<br/>SAIL男鞋</span></a></li><li><a target="_blank" href="http://ju.atpanel.com/?url=http://search1.taobao.com/browse/1801/n-2---0----------------g,giydambqhizdomjtgm5tembyhazdumzsgu4do--g,giydambqhjkgqzjaizqwgzjaknug64b3giydqobshkykfnx3wgymxoopwxa5a-----g,krugkidgmfrwkidtnbxxaifquk3pxmnqzo4sbshj---------------y-40-list-commend-0-all-1801.htm?ad_id=&amp;am_id=&amp;cm_id=&amp;pm_id=150010385180a75998b7"><img height="55" width="55" src="http://pics.taobaocdn.com/bao/album/chl/market/thefaceshop_aerbeisi_55x552221www.jpg"/><span>初秋补水最佳选择</span></a></li>
		</ul>
		<ul class="recommend-buy-list">
			<li><a target="_blank" href="http://ju.atpanel.com/?url=http://search1.taobao.com/browse/16-50008901/n-4----0---------yes--------------g,zdkq-------2-------b-y-40-grid-coefp-40-all-50008901.htm?ad_id=&amp;am_id=&amp;cm_id=&amp;pm_id=150010386056b95b3409"><img height="55" width="55" src="http://pics.taobaocdn.com/bao/album/chl/lady/nvren827_yanting_wy55.jpg"/><span>日式经典款风衣</span></a></li><li><a target="_blank" href="http://ju.atpanel.com/?url=http://list.taobao.com/browse/50008097-50008224/n-1--2-false--------yes---------------------2-------b-y-80-list-coefp-0-all-50008224.htm?ad_id=&amp;am_id=&amp;cm_id=&amp;pm_id=15001038611baa2a01f9"><img height="55" width="55" src="http://pics.taobaocdn.com/bao/album/chl/jd_0825_55_55_2-web.jpg"/><span>42寸液晶<br/>直降2000</span></a></li><li><a target="_blank" href="http://ju.atpanel.com/?url=http://list.taobao.com/browse/1201/n-g,gezteobsha------------------1--0------95---------------------------------40--coefp-0-all-1201.htm?ad_id=&amp;am_id=&amp;cm_id=&amp;pm_id=15001038627195f7472b"><img height="55" width="55" src="http://pics.taobaocdn.com/bao/album/chl/zyl-x19-55-55.gif"/><span>特价X19<br/>148搞定</span></a></li><li><a target="_blank" href="http://ju.atpanel.com/?url=http://search1.taobao.com/browse/1801/n-2---0----------------g,giydambqhizdsnbxha--g,giydambqhjcgs33sf6247mgc-----g,2gu35j6b5eqlxqfq24ql5k53vi---------------y-40-list-commend-0-all-1801.htm?ad_id=&amp;am_id=&amp;cm_id=&amp;pm_id=1500103863ad6eff8519"><img height="55" width="55" src="http://pics.taobaocdn.com/bao/album/chl/market/DIOR_SNOW_WHITE_JINGHUA_55X55.jpg"/><span>迪奥美白正品48元</span></a></li>
		</ul>
	</div>
</div>
<!-- end of recommend-buy-demo -->

<script type="text/javascript">	
(function() {
	
	var Assert = YAHOO.util.Assert,
		ObjectAssert = YAHOO.util.ObjectAssert,
		ArrayAssert = YAHOO.util.ArrayAssert;
	var D = Unicorn.util.Dom,
		E = Unicorn.util.Event;
					
	var testCase = new YAHOO.tool.TestCase({
		//name of the test case
		name: "Unicorn TestCase",
		
		test_widget_PanelList: function() {
			YAHOO.log('开始 test_widget_TabView', 'case', 'testCase');
			YAHOO.log(' - 请手动测试效果是否正常', 'wait', 'testCase');
			
			Unicorn.widget.TabView.decorate('demo1', { parseHash: true } );
			
			Unicorn.widget.TabView.decorate('recommend-buy-demo', { eventType: 'mouse' } );
			
			YAHOO.log('结束 test_widget_TabView', 'case', 'testCase');
		} 
	});
	
	var suite = new YAHOO.tool.TestSuite("testSuite");
	suite.add(testCase);
	
	YAHOO.util.Event.onDOMReady(function (){
		//create the logger
		var logger = new YAHOO.tool.TestLogger();
		
		//add the tests
		YAHOO.tool.TestRunner.add(suite);

		if (parent && parent != window) {
			YAHOO.tool.TestManager.load();
		} else {
			YAHOO.tool.TestRunner.run();
		}
	});
})();
</script>
</body>
</html>
